<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Video Live Wallpaper">
    <meta name="author" content="Alynx Zhou">
    <!-- Font Awesome Icons -->
    <link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <!-- Google Fonts -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet"> -->
    <!-- <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> -->
    <!-- Plugin CSS -->
    <link href="/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
    <!-- Theme CSS - Includes Bootstrap -->
    <link href="/css/creative.css" rel="stylesheet">
    <!-- Bootstrap core JavaScript -->
    <script defer src="/vendor/jquery/jquery.min.js"></script>
    <script defer src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Plugin JavaScript -->
    <script defer src="/vendor/jquery-easing/jquery.easing.min.js"></script>
    <script defer src="/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
    <!-- Custom scripts for this template -->
    <script defer src="/js/creative.js"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
    <link rel="manifest" href="/favicons/site.webmanifest">
    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#ffffff">
    <title>Alynx Live Wallpaper</title>
  </head>
  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="/img/logo.png" alt="logo" id="logo">Alynx Live Wallpaper</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto my-2 my-lg-0">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#download">Download</a>
            </li>
            <!-- <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li> -->
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Masthead -->
    <header class="masthead">
      <div class="container h-100">
        <div class="row h-100 align-items-center justify-content-center text-center">
          <div class="col-lg-10 align-self-end">
            <h1 class="text-uppercase text-white font-weight-bold">Alynx Live Wallpaper</h1>
            <hr class="divider my-4">
          </div>
          <div class="col-lg-8 align-self-baseline">
            <p class="text-white-75 font-weight-light mb-5">An android app that allows you choose a video as wallpaper.</p>
            <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
          </div>
        </div>
      </div>
    </header>
    <!-- About Section -->
    <section class="page-section bg-primary" id="about">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center">
            <h2 class="text-white mt-0">Choose your favorite video as wallpaper!</h2>
            <hr class="divider light my-4">
            <p class="text-white mb-4">Extreme lightweight, no sensitive permissions, no network traffic.</p>
            <a class="btn btn-light btn-xl js-scroll-trigger" href="#download">Download App</a>
          </div>
        </div>
      </div>
    </section>
    <!-- Services Section -->
    <section class="page-section" id="download">
      <div class="container">
        <h2 class="text-center mt-0">Download</h2>
        <hr class="divider my-4">
        <div class="row">
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <i class="fab fa-4x fa-github text-primary mb-4"></i>
              <h3 class="h4 mb-2"><a href="https://github.com/AlynxZhou/alynx-live-wallpaper/releases/latest" target="_blank">GitHub Release</a></h3>
              <p class="text-muted mb-0">Download APK from GitHub Release.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
              <h3 class="h4 mb-2"><a href="https://github.com/AlynxZhou/alynx-live-wallpaper/" target="_blank">GitHub Repo</a></h3>
              <p class="text-muted mb-0">Get source code from GitHub Repo.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <i class="fab fa-4x fa-google-play text-primary mb-4"></i>
              <h3 class="h4 mb-2"><a href="https://play.google.com/store/apps/details?id=xyz.alynx.livewallpaper" target="_blank">Play Store</a></h3>
              <p class="text-muted mb-0">You can also install and update it from Play Store.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5">
              <i class="fas fa-4x fa-file-archive text-primary mb-4"></i>
              <h3 class="h4 mb-2"><a href="https://www.coolapk.com/apk/xyz.alynx.livewallpaper" target="_blank">酷安网</a></h3>
              <p class="text-muted mb-0">中国用户可以去酷安网下载。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Portfolio Section -->
    <!-- <section id="portfolio">
      <div class="container-fluid p-0">
        <div class="row no-gutters">
          <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="img/portfolio/fullsize/1.jpg">
              <img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="">
              <div class="portfolio-box-caption">
                <div class="project-category text-white-50">
                  Category
                </div>
                <div class="project-name">
                  Project Name
                </div>
              </div>
            </a>
          </div>
          <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="img/portfolio/fullsize/2.jpg">
              <img class="img-fluid" src="img/portfolio/thumbnails/2.jpg" alt="">
              <div class="portfolio-box-caption">
                <div class="project-category text-white-50">
                  Category
                </div>
                <div class="project-name">
                  Project Name
                </div>
              </div>
            </a>
          </div>
          <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="img/portfolio/fullsize/3.jpg">
              <img class="img-fluid" src="img/portfolio/thumbnails/3.jpg" alt="">
              <div class="portfolio-box-caption">
                <div class="project-category text-white-50">
                  Category
                </div>
                <div class="project-name">
                  Project Name
                </div>
              </div>
            </a>
          </div>
          <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="img/portfolio/fullsize/4.jpg">
              <img class="img-fluid" src="img/portfolio/thumbnails/4.jpg" alt="">
              <div class="portfolio-box-caption">
                <div class="project-category text-white-50">
                  Category
                </div>
                <div class="project-name">
                  Project Name
                </div>
              </div>
            </a>
          </div>
          <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="img/portfolio/fullsize/5.jpg">
              <img class="img-fluid" src="img/portfolio/thumbnails/5.jpg" alt="">
              <div class="portfolio-box-caption">
                <div class="project-category text-white-50">
                  Category
                </div>
                <div class="project-name">
                  Project Name
                </div>
              </div>
            </a>
          </div>
          <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="img/portfolio/fullsize/6.jpg">
              <img class="img-fluid" src="img/portfolio/thumbnails/6.jpg" alt="">
              <div class="portfolio-box-caption p-3">
                <div class="project-category text-white-50">
                  Category
                </div>
                <div class="project-name">
                  Project Name
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section> -->
    <!-- Call to Action Section -->
    <section class="page-section bg-dark text-white">
      <div class="container text-center">
        <h2 class="mb-4">If you have some questions...</h2>
        <a class="btn btn-light btn-xl" href="/faq.html">See FAQ!</a>
      </div>
    </section>
    <!-- Contact Section -->
    <section class="page-section" id="contact">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center">
            <h2 class="mt-0">Let's Get In Touch!</h2>
            <hr class="divider my-4">
            <p class="text-muted mb-5">If you have issues, please contact me.</p>
            <p class="text-muted mb-5">If you love it, you can reward me in app.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 ml-auto text-center">
            <i class="fas fa-globe fa-3x mb-3 text-muted"></i>
            <div><a href="https://github.com/AlynxZhou/alynx-live-wallpaper/issues" target="_blank">GitHub Issues</a></div>
          </div>
          <div class="col-lg-4 mr-auto text-center">
            <i class="fas fa-envelope fa-3x mb-3 text-muted"></i>
            <a class="d-block" href="mailto:alynx.zhou@gmail.com">alynx.zhou@gmail.com</a>
          </div>
        </div>
      </div>
    </section>
    <!-- Footer -->
    <footer class="bg-light py-5">
      <div class="container">
        <div class="small text-center text-muted"><a href="https://alynx.xyz/" target="_blank">Alynx Zhou</a> <i class="far fa-copyright"></i> 2019</div>
      </div>
    </footer>
  </body>
</html>
